<template>
  <m-infinite-list
    v-model="isLoading"
    :isFinished="isFinished"
    @onLoad="updateList"
  >
    <m-waterfall
      style="margin: 10px"
      :data="waterfallList"
      nodeKey="id"
      :column="isMobileTerminal ? 2 : 5"
      :picturePreReading="false"
    >
      <template v-slot="{ item, width }">
        <item-vue
          @itemImgClick="handleItemImgClick"
          :data="item"
          :width="width"
        ></item-vue>
      </template>
    </m-waterfall>
  </m-infinite-list>
  <!-- item详情页 -->
  <transition
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <pins-vue v-if="isVisiblePins" :id="currentPins.id" />
  </transition>
</template>

<script setup>
import { ref, watch } from 'vue'
import gsap from 'gsap'
import { useEventListener } from '@vueuse/core'
import { getPexelsList } from '@/server/api/pexels'
import itemVue from './item.vue'
import { isMobileTerminal } from '@/utils/flexible'
import { useCategoryStore } from '@/store/category'
import PinsVue from '@/views/pins/components/pins.vue'

const categoryStore = useCategoryStore()

let query = {
  page: 1,
  size: 20
}

const isLoading = ref(false)
const isFinished = ref(false)

const waterfallList = ref([])
// 是否展示pins
const isVisiblePins = ref(false)
// 当前的pins数据
const currentPins = ref({})

const updateList = async () => {
  if (isFinished.value) return
  if (waterfallList.value.length) {
    query.page += 1
  }
  const res = await getPexelsList(query)

  if (query.page === 1) {
    waterfallList.value = res.list
  } else {
    waterfallList.value.push(...res.list)
  }

  if (waterfallList.value.length === res.total) {
    isFinished.value = true
  }

  isLoading.value = false
}

const resetList = (newQuery) => {
  query = { ...query, ...newQuery }
  waterfallList.value = []
  isLoading.value = true
  isFinished.value = false
}

/**
 * 跳转 item 详情页
 */
const handleItemImgClick = (item) => {
  // 修改浏览器URL
  history.pushState(null, null, `/#/pins/${item.id}`)
  currentPins.value = item
  isVisiblePins.value = true
}

/**
 * 监听浏览器后退事件
 */
useEventListener(window, 'popstate', () => {
  isVisiblePins.value = false
})

const beforeEnter = (el) => {
  gsap.set(el, {
    scaleX: 0,
    scaleY: 0,
    opacity: 0,
    transformOrigin: '0 0',
    translateX: currentPins.value.location?.left,
    translateY: currentPins.value.location?.top
  })
}

const enter = (el, done) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 1,
    scaleY: 1,
    opacity: 1,
    translateX: 0,
    translateY: 0,
    transform: `translate3d(0,0,0)`,
    onComplete: done
  })
}

const leave = (el) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 0,
    scaleY: 0,
    x: currentPins.value.location?.left,
    y: currentPins.value.location?.top,
    opacity: 0
  })
}

/**
 * 监听点击导航变化，请求数据
 */
watch(
  () => categoryStore.currentCategory,
  (newCategory) => {
    resetList({ page: 1, categoryId: newCategory.id })
  }
)

/**
 * 监听输入框文本变化，请求数据
 */
watch(
  () => categoryStore.searchText,
  (newVal) => {
    resetList({ page: 1, searchText: newVal })
  }
)
</script>

<style lang="scss" scoped>
.list {
  margin: 10px 0;
}
</style>
